﻿@using BookShop.Library.Constant
@{
    ViewBag.Title = "Đăng ký tài khoản | Book Shop Ngân Hà";
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li class="active">Đăng ký tài khoản</li>
</ul>

<div class="row margin-bottom-40">
    @{
        Html.RenderPartial("_AccountSidebar");
    }
    <div class="col-md-9 col-sm-9">
        <h1>Đăng ký tài khoản</h1>
        <div class="content-form-page">
            <div class="row">
                <div class="col-md-8 col-sm-8">
                    <form class="form-horizontal" id="formRegister" method="POST" action="@Url.Action("SignUp")" role="form">
                        <div class="alert alert-danger display-hide" style="display: none;">
                            <button class="close" data-close="alert"></button>
                            @AlertMessage.InvalidInput
                        </div>
                        <fieldset>
                            <legend>Thông tin cá nhân</legend>
                            <div class="form-group">
                                <label for="firstname" class="col-lg-4 control-label">Họ và tên <span class="require">*</span></label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="fullName" name="fullName" value="@ViewBag.AddFullName">
                                    <span class="help-block" for="fullName"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-lg-4 control-label">Email <span class="require">*</span></label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="email" name="email" value="@ViewBag.AddEmail">
                                    <span class="help-block" for="email"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="username" class="col-lg-4 control-label">Username <span class="require">*</span></label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="username" name="username" value="@ViewBag.AddUsername">
                                    <span class="help-block" for="username"></span>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend>Mật khẩu</legend>
                            <div class="form-group">
                                <label for="password" class="col-lg-4 control-label">Mật khẩu <span class="require">*</span></label>
                                <div class="col-lg-8">
                                    <input type="password" class="form-control" id="password" name="password">
                                    <span class="help-block" for="password"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="confirm-password" class="col-lg-4 control-label">Xác nhận mật khẩu <span class="require">*</span></label>
                                <div class="col-lg-8">
                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                                    <span class="help-block" for="confirm_password"></span>
                                </div>
                            </div>
                        </fieldset>
                        <div class="row">
                            <div class="col-lg-8 col-md-offset-4 padding-left-0 padding-top-20">
                                <button type="submit" class="btn btn-primary">Đăng ký</button>
                                <button type="button" class="btn btn-default" id="btn-cancel">Hủy</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Javascript{
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            validateAdd();
            $('#btn-cancel').click(function () {
                $('#fullName').val('');
                $('#email').val('');
                $('#username').val('');
                $('#password').val('');
                $('#confirm_password').val('');
            });
        });
        function validateAdd() {
            var form1 = $('#formRegister');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    email: {
                        required: true
                    },
                    username: {
                        required: true,
                        rangelength: [8, 16]
                    },
                    password: {
                        required: true
                    },
                    fullName: {
                        required: true
                    },
                    confirm_password: {
                        equalTo: "#password"
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}
